<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>详情页面</title>
    <style>
        .divbody{
            margin: 0 auto;
            width: 1260px;
        }

        .divleft {
            float: left;
            margin-left: 0;
            width: 70%;
            height: 80%;
            background-color: #f5f7fa;
            text-align: center;
            vertical-align: middle;
        }

        .divright {
            margin-left: 70%;
            width: 30%;
            padding: 1%;
        }

        .divright1 {
            margin-top: 20%;
            height: 10%;
            text-align: center;

        }

        .divright2 {
            height: 20%;
            margin-top: 10%;
            text-align: center;
        }

        .divright2-p1 {
            text-align: center;
            font-size: 5%;
        }

        .divright2-p2 {
            text-align: center;
            color: #888888;
            font-size: 3%;
        }

        .divright3 {
            height: 30%;
            text-align: center;
            padding: 4%;
        }

        .divright3-p1 {
            text-align: left;
            font-size: 3%;
            padding: 3%;
        }

        .divright3-table {
            border: 1px solid black;
            width: 85%;
            box-shadow:
                2px 2px 2px #888888,
                -2px -2px 2px #888888,
                2px -2px 2px #888888,
                -2px 2px 2px #888888;
            margin-left: 5%;
        }

        .divright3-p2 {
            text-align: right;
            margin-right: 0;
            font-size: 35px;
        }

        .divright3-p3 {
            text-align: left;
            margin-left: 0;
            font-size: 35px;
        }

        .divright4 {
            height: 20%;
        }

        .divright4-table {
            width: 85%;
            margin-left: 12%;
        }

        .buybutton {
            background-color: #67c23a;
            width: 70%;
            height: 20%;

            color: white;
            font-size: 17px;
            border: 0;
            border-radius: 5px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .collectionbutton {
            background-color: #f56c6c;
            width: 70%;
            color: white;
            font-size: 17px;
            border: 0;
            border-radius: 5px;
            cursor: pointer;
        }

        .buybutton:active {
            transform: scale(0.98);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
            border-radius: 4px;
        }

        .collectionbutton:active {
            transform: scale(0.98);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
            border-radius: 4px;
        }

        #hearddiv {
            width: 100%;
            position: relative;
        }

        #hearddiv p {
            text-align: left;
        }

        #hearddiv a {
            text-decoration: none;
            color: inherit;
        }

        #hearddiv button {
            position: absolute;
            top: 0;
            right: 3%;
        }
        .header {

            height: 60px;
            white-space: nowrap;
            background-color: rgb(252, 252, 252);
        }

        .header ul {
            list-style: none;
            display: flex;
            margin: 0;
        }

        .header ul li {

            margin-top: 16px;
        }

        .header ul :nth-child(1) {
            margin-left: -40px;
        }

        .header ul :nth-child(2) {
            margin-left: 900px;
        }


        .header ul :nth-child(3) {
            margin-left: 25px;
        }

        .header ul :nth-child(4) {
            margin-left: 75px;
        }

        .header ul :nth-child(5) {
            margin-left: 30px;
        }

        .header a {
            text-decoration: none;
            color: black;
            font-weight: lighter;
        }

        .header a:hover {
            color: cadetblue;
        }
    </style>
    <!-- Import style -->
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <!-- Import Vue 3 -->
    <script src="//unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="//unpkg.com/element-plus"></script>
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/order.css">
    <link rel="shortcut icon" href="image/favicon.ico" type="image/x-icon">
    <script src="js/carousel.js"></script>
</head>

<body>
<div class="divbody">
<div class="header">
    <ul>
        <li><a href="/toIndex">首页</a></li>
        <li><a href="/toCollection">收藏中心</a></li>
        <li><a href="/toOrder">我的订单</a></li>
        <li><label for="customer"><img class="icon" src="image/user.png"></label></li>
        <li><a href="/pre_login"><input type="button" value="登录" id="customer"></a></li>
    </ul>
</div>
    <div th:object="${car}">
        <div class="divleft">
            <img th:src="*{imgURL}" alt="商品图片" style="width:100%; height:auto;">
        </div>
        <div class="divright">
            <div class="divright1">
                <p>预计交付日期： 1-4周</p>
            </div>
            <!--绑定car接受CarController的数据-->
            <div>
                <div class="divright2">
                    <table align="center" width="100%">
                        <tr class="divright2-p1">
                            <td><span th:text="*{endurance}"></span>公里</td>
                            <td><span th:text="*{speed}"></span>公里/时</td>
                            <td><span th:text="*{acceleration}"></span>秒</td>
                        </tr>
                        <tr class="divright2-p2">
                            <td>续航里程</td>
                            <td>最高时速</td>
                            <td>百公里加速</td>
                        </tr>
                    </table>
                </div>
                <div class="divright3">
                    <p class="divright3-p1">普通型</p>
                    <table class="divright3-table">
                        <tr>
                            <td class="divright3-p3">普通型</td>
                            <td class="divright3-p2">￥<span th:text="*{midPrice}"></span>万</td>
                        </tr>
                    </table>
                    <p class="divright3-p1">豪华型</p>
                    <table class="divright3-table">
                        <tr>
                            <td class="divright3-p3">豪华型</td>
                            <td class="divright3-p2">￥<span th:text="*{topPrice}"></span>万</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="divright4">
                <table class="divright4-table">
                    <tr>
                        <!--立即购买直接跳转订单页面，加入收藏类似购物车效果，加入收藏列表，不做跳转-->
                        <form action="/addOrder">
                            <!--接收该商品的id，name传给后端-->
                            <input type="hidden" th:field="*{carId}" name="carId">
                            <td><button class="buybutton" type="submit">🛒立即购买</button></td>
                        </form>
                        <form action="/addCollection">
                            <input type="hidden" th:field="*{carId}" name="carId">
                            <td><button class="collectionbutton" type="submit">☆加入收藏</button></td>
                        </form>
                    </tr>
                </table>
            </div>


        </div>
    </div>
</div>
</body>

</html>